<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form" label-width="75px">
      <el-form-item label="文件名">
        <el-input v-model="form.name" class="inputWidthInline" placeholder="文件名" />
      </el-form-item>
      <el-form-item label="上传时间">
        <el-date-picker
          v-model="form.createTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="primary" @click="add" v-if="$formatFR(file.add)">新增</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50" label="序号" align="center" />
      <el-table-column prop="name" label="文件名" align="center" width="320" />
      <el-table-column prop="path" label="文件路径" align="center" show-overflow-tooltip />
      <el-table-column prop="url" label="文件URl" align="center" show-overflow-tooltip />
      <el-table-column prop="size" label="文件大小" align="center">
        <template v-slot="scope">{{ scope.row.size | sizeFilter }}</template>
      </el-table-column>
      <el-table-column prop="type" label="文件类型" align="center" />
      <el-table-column prop="createTime" label="上传时间" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <a :href="downloadUrl" target="_blank">
            <el-link v-if="$formatFR(file.down)" type="primary" @click="handelDownload(scope.row)">
              下载
            </el-link>
          </a>
          <el-link
            plain
            size="mini"
            :style="{ marginLeft: '10px' }"
            v-if="$formatFR(file.del)"
            @click="handelDelete(scope.row)"
            type="danger"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <base-pagination
      :size="form.size"
      :current="form.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></base-pagination>
    <addDialog ref="addDialog" @updatePage="getpage"></addDialog>
  </el-card>
</template>

<script>
import { fileList, delFile } from "@/api/system/file"
import FUNCROLELIST from "@/utils/func_role/system"

import addDialog from "./components/addDialog.vue"
import { mapGetters } from "vuex"

export default {
  components: {
    addDialog
  },
  data() {
    return {
      file: FUNCROLELIST.file,
      form: {
        name: "",
        createTime: [],
        size: 10,
        current: 1
      },
      total: 0,
      tableData: [],
      downloadUrl: ""
    }
  },
  mounted() {
    this.getpage()
  },
  computed: {
    ...mapGetters(["token"])
  },
  methods: {
    handleSizeChange(val) {
      this.form.size = val
      this.getpage()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.getpage()
    },

    search() {
      this.form.current = 1
      this.getpage()
    },
    handelDownload(row) {
      this.downloadUrl = row.url
    },
    reset() {
      this.form = {
        name: "",
        createTime: [],
        size: 10,
        current: 1
      }
      this.getpage()
    },
    add() {
      this.$refs.addDialog.init()
    },
    handelDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delFile(row.id).then(() => {
          this.getpage()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    },
    /**
     * 数据请求
     */
    getpage() {
      const data = {
        current: this.form.current,
        size: this.form.size,
        name: this.form.name,
        createTimeStart: this.form.createTime[0],
        createTimeEnd: this.form.createTime[1]
      }
      fileList(data).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>
